<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<link rel="icon"
	href="https://jscdn.com.cn/highcharts/images/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/* css 代码  */
</style>
<script src="https://code.highcharts.com.cn/highcharts/highcharts.js"></script>
<script
	src="https://code.highcharts.com.cn/highcharts/highcharts-more.js"></script>
<script
	src="https://code.highcharts.com.cn/highcharts/modules/exporting.js"></script>
<script
	src="https://img.hcharts.cn/highcharts-plugins/highcharts-zh_CN.js"></script>
</head>
<body>
	<div id="container"
		style="height: 800px; margin: auto; min-width: 1000px; max-width: 1000px"></div>
	<script>
		var chart = Highcharts
				.chart(
						'container',
						{
							chart : {
								type : 'boxplot'
							},
							title : {
								text : ''
							},
							credits : {
								enabled : false
							},
							legend : {
								enabled : false,
								itemStyle : {
									fontSize : '13px'
								}
							},
							exporting : {
								sourceWidth : 1280,
								sourceHeight : 720,
								scale : 1
							},
							xAxis : {
								categories : [ 'End-to-end DRL', 'SRPT+EF',
										'	FOPNR+EF', 'SPT+EF', 'SPT+SPTW',
										'SPT+SPT', 'FOPNR+SPTW', 'SRPT+SPTW',
										'FOPNR+SPT', 'SRPT+SPT' ],

								title : {
									text : '',
									style : {
										"color" : 'black',
										"cursor" : "default",
										"fontSize" : "16px",
										"fontFamily" : "Time New Roman"
									}
								},
								labels : {
									rotation : -45,
									style : {
										"color" : 'black',
										"cursor" : "default",
										"fontSize" : "15px",
										"fontFamily" : "Time New Roman"
									}
								},
								tickWidth : 1,
								tickmarkPlacement : 'on'
							},
							yAxis : {
								title : {
									text : 'Average Cmax',
									style : {
										"color" : 'black',
										"cursor" : "default",
										"fontSize" : "16px",
										"fontFamily" : "Time New Roman"
									}
								},
								labels : {
									style : {
										"color" : 'black',
										"cursor" : "default",
										"fontSize" : "16px",
										"fontFamily" : "Time New Roman"
									}
								}
							},
							plotOptions : {
								/*boxplot : {
									lineWidth : 3,
									medianWidth : 3,
									stemWidth : 3,
									whiskerWidth : 2
								}*/
								boxplot : {
									colorByPoint : true,
									lineWidth : 2,
									medianColor : '#0C5DA5',
									medianWIdth : 3,
									stemColor : '#A63400',
									stemDashStyle : 'dot',
									stemWidth : 1,
									whiskerLength: '30%'
								},
							},
							tooltip : {
								pointFormat : '<span style="color:{point.color}">\u25CF</span> <b> {series.name}</b><br/>'
										+ // eslint-disable-line no-dupe-keys
										'最大值: {point.high}<br/>'
										+ 'Q3\t: {point.q3}<br/>'
										+ '中位数: {point.median}<br/>'
										+ 'Q1\t: {point.q1}<br/>'
										+ '最小值: {point.low}<br/>'
							},
							series : [
									{
										name : 'DDDQNPR',
										data : [
												[ 399, 798.5, 1085.5, 1398.75,
														2276 ],
												[ 498, 898.75, 1213.5, 1525,
														2639 ],
												[ 498, 892.25, 1201.5, 1551,
														2547 ],
												[ 510, 943, 1286.5, 1580.75,
														2479 ],
												[ 554, 935.75, 1267, 1607.75,
														2543 ],
												[ 580, 1049.25, 1380.5, 1783.5,
														2641 ],
												[ 591, 1053.25, 1456, 1805.5,
														2823 ],
												[ 550, 1063, 1427, 1825.5, 2859 ],
												[ 612, 1131.75, 1519.5,
														2000.25, 3097 ],
												[ 547, 1159.75, 1481, 2001,
														3192 ] ],
										tooltip : {
											headerFormat : '<em>实验号码： {point.key}</em><br/>'
										}
									},
									{
										name : 'outlier',
										color : Highcharts.getOptions().colors[0],
										type : 'scatter',
										data : [ [ 0, 2301 ] ],
										marker : {
											symbol: 'circle',
											fillColor : 'white',
											lineWidth : 1,
											radius : 5,
											lineColor : Highcharts.getOptions().colors[0]
										},
										tooltip : {
											pointFormat : 'Observation: {point.y}'
										}
									},
									{
										name : 'outlier',
										color : Highcharts.getOptions().colors[0],
										type : 'scatter',
										data : [ [ 0, 2355 ] ],
										marker : {
											symbol: 'circle',
											fillColor : 'white',
											lineWidth : 1,
											radius : 5,
											lineColor : Highcharts.getOptions().colors[0]
										},
										tooltip : {
											pointFormat : 'Observation: {point.y}'
										}
									},
									{
										name : 'outlier',
										color : Highcharts.getOptions().colors[2],
										type : 'scatter',
										data : [ [ 2, 2552 ] ],
										marker : {
											symbol: 'circle',
											fillColor : Highcharts.getOptions().colors[2],
											lineWidth : 1,
											radius : 5,
											lineColor : Highcharts.getOptions().colors[2]
										},
										tooltip : {
											pointFormat : 'Observation: {point.y}'
										}
									},
									{
										name : 'outlier',
										color : Highcharts.getOptions().colors[0],
										type : 'scatter',
										data : [ [ 4, 2683 ] ],
										marker : {
											symbol: 'circle',
											fillColor : Highcharts.getOptions().colors[4],
											lineWidth : 1,
											radius : 5,
											lineColor : Highcharts.getOptions().colors[4]
										},
										tooltip : {
											pointFormat : 'Observation: {point.y}'
										}
									},
									{
										name : 'outlier',
										color : Highcharts.getOptions().colors[0],
										type : 'scatter',
										data : [ [ 5, 2920 ] ],
										marker : {
											symbol: 'circle',
											fillColor : Highcharts.getOptions().colors[5],
											lineWidth : 1,
											radius : 5,
											lineColor : Highcharts.getOptions().colors[5]
										},
										tooltip : {
											pointFormat : 'Observation: {point.y}'
										}
									},
									{
										name : 'outlier',
										color : Highcharts.getOptions().colors[7],
										type : 'scatter',
										data : [ [ 7, 2985 ] ],
										marker : {
											symbol: 'circle',
											fillColor : Highcharts.getOptions().colors[7],
											lineWidth : 1,
											radius : 5,
											lineColor : Highcharts.getOptions().colors[7]
										},
										tooltip : {
											pointFormat : 'Observation: {point.y}'
										}
									} ]
						});
	</script>
</body>
</html>